<template>
  <div
    v-loading="loading"
    element-loading-text="加载中..."
    style="display: flex; flex-direction: column; height: 100%"
  >
    <div class="top_app">
      <div class="top_h">
        <div class="text">
          <span class="module_color">{{ DetailStore?.name }}</span>
          <HStatus type="info" v-if="DetailStore?.status">禁用</HStatus>
          <HStatus v-else>启用</HStatus>
        </div>
        <div class="del_edit_btn">
          <HPlainButton color="#007cff" @click="showAdd">编辑</HPlainButton>
          <HPlainButton type="error" @click="deleteClick">删除</HPlainButton>
        </div>
      </div>
    </div>
    <div class="app-container" style="height: 100%">
      <div class="content_inner">
        <!-- 基本信息 -->
        <h4 class="title_bl">仓库信息</h4>
        <el-form :model="orderDetail" class="basic_information">
          <el-row>
            <el-col :lg="8" :sm="12">
              <el-form-item label="仓库编码:">
                <span class="ml">{{ DetailStore?.storeNo }}</span>
              </el-form-item>
              <el-form-item label="允许负库存:">
                <span class="ml">{{ DetailStore?.canNegativeStock ? '是' : '否' }}</span>
              </el-form-item>

              <el-form-item label="启用仓位:">
                <span class="ml">{{ DetailStore?.enableStorePosition ? '开启' : '关闭' }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :sm="12">
              <el-form-item label="仓管:">
                <span class="ml"
                  >{{ DetailStore?.userName }}&nbsp;{{ DetailStore?.userPhone }}</span
                >
              </el-form-item>
              <el-form-item label="地址:">
                <span class="ml">
                  {{ DetailStore?.province }}{{ DetailStore?.city }}{{ DetailStore?.area
                  }}{{ DetailStore?.town }}{{ DetailStore?.address }}</span
                >
              </el-form-item>
            </el-col>
            <el-col :lg="8" :sm="12">
              <el-form-item label="创建时间:">
                <span class="ml">{{ DetailStore?.createTime }}</span>
              </el-form-item>
              <el-form-item label="更新时间:">
                <span class="ml"> {{ DetailStore?.updateTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="content_inner" style="display: flex; flex-direction: column; flex: 1">
        <h4 class="title_bl">库存明细</h4>
        <div style="flex: 1; position: relative; margin-bottom: 12px">
          <el-table
            :border="true"
            :data="StoreDetailGoodsList"
            resizable
            stripe
            height="100%"
            style="position: absolute"
            :header-cell-style="tableHeaderCellStyle"
          >
            <template #empty>
              <el-empty description="暂无数据" />
            </template>
            <el-table-column label="序号" fixed width="50" type="index" />
            <template v-if="DetailStore?.enableStorePosition">
              <el-table-column prop="name" show-overflow-tooltip label="仓位" min-width="150">
                <template v-slot="i">
                  <span class="number" @click="onClickStorePosition(i.row)">{{ i.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column show-overflow-tooltip label="状态" min-width="150">
                <template v-slot="i">
                  <el-tag type="info" v-if="i.row.status">禁用</el-tag>
                  <el-tag v-else>启用</el-tag>
                </template>
              </el-table-column>
            </template>
            <template v-else>
              <el-table-column
                prop="goodsBrand"
                show-overflow-tooltip
                label="品牌"
                min-width="150"
              />
              <el-table-column
                prop="goodsType"
                show-overflow-tooltip
                label="类型"
                min-width="150"
              />
              <el-table-column
                prop="goodsName"
                show-overflow-tooltip
                label="名称"
                min-width="100"
              />
              <el-table-column
                prop="goodsModel"
                show-overflow-tooltip
                label="型号"
                min-width="100"
              />
              <el-table-column
                prop="goodsSpecName"
                show-overflow-tooltip
                label="规格"
                min-width="100"
              />
              <el-table-column prop="goodsUnit" show-overflow-tooltip label="单位" width="100" />
            </template>
            <el-table-column min-width="100" show-overflow-tooltip>
              <template #header>
                <span>即时库存</span>
                <el-tooltip content="真实存在的库存" placement="top">
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </el-tooltip>
              </template>
              <template v-slot="i">
                <p class="right_text"> {{ i.row.systemStock.toLocaleString() }}</p>
              </template>
            </el-table-column>
            <el-table-column min-width="100" show-overflow-tooltip>
              <template #header>
                <span>可用库存</span>
                <el-tooltip content="即时库存+即将入库库存-即将出库的库存 " placement="top">
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </el-tooltip>
              </template>
              <template v-slot="i">
                <p class="right_text"> {{ i.row.availableStock.toLocaleString() }}</p>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="footer">
          <Pagination
            ref="pagination"
            :list_total="total"
            @size-change="getStoreList"
            @current-change="getStoreList"
          />
        </div>
      </div>
    </div>

    <!-- 添加仓库弹窗 -->
    <HModal v-model="addDialog" title="编辑仓库" :width="600">
      <el-form
        ref="ruleFormRef"
        :model="storeForm"
        label-position="right"
        :rules="rulesStore"
        label-width="90"
        class="form_content"
        @validate="handleEditStoreFormValidate"
      >
        <!--仓库类型-->
        <el-form-item
          prop="outStoreExample"
          :class="{
            form_item: editStoreFormValidateResult['outStoreExample'],
            validate_fail: !editStoreFormValidateResult['outStoreExample'],
          }"
        >
          <template #label>
            <span
              >仓库类型
              <el-tooltip content="创建后不可更改" placement="top">
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
            </span>
          </template>
          <el-select v-model="storeForm.outStoreExample" :disabled="storeForm.id != null" clearable>
            <el-option label="内部仓库" :value="0" />
            <el-option label="服务商-外部仓库" :value="1" />
            <el-option label="工程师-外部仓库" :value="2" />
          </el-select>
        </el-form-item>

        <!--仓库名称-->
        <el-form-item
          label="仓库名称"
          prop="name"
          :class="{
            form_item: editStoreFormValidateResult['name'],
            validate_fail: !editStoreFormValidateResult['name'],
          }"
        >
          <el-input v-model="storeForm.name" clearable placeholder="仓库名称" />
        </el-form-item>

        <!--仓库地址-->
        <el-form-item
          label="仓库地址"
          prop="province"
          :class="{
            form_item: editStoreFormValidateResult['province'],
            validate_fail: !editStoreFormValidateResult['province'],
          }"
        >
          <SingleAddress ref="addrsDom" :address="addrs" @value-change="addressValChange" />
        </el-form-item>

        <!--详细地址-->
        <el-form-item
          label="详细地址"
          prop="address"
          :class="{
            form_item: editStoreFormValidateResult['address'],
            validate_fail: !editStoreFormValidateResult['address'],
          }"
        >
          <el-input
            v-model="storeForm.address"
            clearable
            class="detail"
            placeholder="请输入详细地址"
            maxlength="200"
          />
        </el-form-item>

        <!--仓管-->
        <el-form-item
          label="仓管"
          prop="userName"
          :class="{
            form_item: editStoreFormValidateResult['userName'],
            validate_fail: !editStoreFormValidateResult['userName'],
          }"
        >
          <el-input v-model="storeForm.userName" clearable placeholder="仓管名称" />
        </el-form-item>

        <!--电话-->
        <el-form-item
          label="电话"
          prop="userPhone"
          :class="{
            form_item: editStoreFormValidateResult['userPhone'],
            validate_fail: !editStoreFormValidateResult['userPhone'],
          }"
        >
          <el-input
            v-model="storeForm.userPhone"
            clearable
            maxlength="11"
            placeholder="电话号码"
            @input="storeForm.userPhone = storeForm.userPhone.replace(/[^\d]/g, '')"
          />
        </el-form-item>
        <el-form-item prop="enableStorePosition" class="form_item">
          <template #label>
            <span
              >仓位
              <el-tooltip
                :content="storeForm.id ? '创建后不可更改' : '开启仓位后，商品出入库都要选择仓位'"
                placement="top"
              >
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
            </span>
          </template>
          <div style="display: flex; align-items: center; gap: 5px">
            <el-switch
              v-model="storeForm.enableStorePosition"
              @change="enableStorePositionValue"
              :disabled="storeForm.id && storeForm.id != null"
            />
            <span v-if="storeForm.enableStorePosition">开启</span>
            <span v-else>关闭</span>
          </div>
          <el-tooltip content="新增仓位" placement="right" v-if="storeForm.enableStorePosition">
            <span class="add_item" style="margin-left: 12px" @click="addItem">+添加仓位</span>
          </el-tooltip>
        </el-form-item>
        <template v-if="storeForm.enableStorePosition">
          <div class="store_name_list" ref="storeListRef">
            <div v-for="(i, index) in storeForm.storePositionVos" :key="index">
              <el-form-item
                :label="index == 0 ? '仓位名称' : ''"
                :prop="`storePositionVos[${index}][name]`"
                :rules="[
                  { required: true, message: '请输入仓位名称', trigger: ['blur', 'change'] },
                ]"
                class="form_item"
              >
                <div style="display: flex; width: 100%; align-items: center">
                  <el-input
                    v-model="i.name"
                    clearable
                    class="detail"
                    placeholder="请输入仓位名称"
                  />
                  <el-tooltip v-if="storeForm.id" content="仓位,是否禁用" placement="top">
                    <div style="display: flex; align-items: center; gap: 5px">
                      <el-switch style="margin-left: 12px" v-model="i.status" />
                      <span v-if="i.status" style="white-space: nowrap">禁用</span>
                      <span v-else style="white-space: nowrap">启用</span>
                    </div>
                  </el-tooltip>
                  <el-tooltip content="删除仓位" placement="right">
                    <el-icon
                      size="20"
                      color="#f56c6c"
                      style="margin-left: 12px"
                      @click="deleteItem(i, index)"
                    >
                      <Remove />
                    </el-icon>
                  </el-tooltip>
                </div>
              </el-form-item>
            </div>
          </div>
        </template>
        <el-form-item label="允许负库存" class="form_item">
          <div style="display: flex; align-items: center; gap: 5px">
            <el-switch v-model="storeForm.canNegativeStock" />
            <span v-if="storeForm.canNegativeStock">是</span>
            <span v-else>否</span>
          </div>
        </el-form-item>
        <el-form-item label="禁用状态" class="last_form_item">
          <div style="display: flex; align-items: center; gap: 5px">
            <el-switch v-model="storeForm.status" />
            <span v-if="!storeForm.status">禁用</span>
            <span v-else>启用</span>
          </div>
        </el-form-item>
      </el-form>
      <template #footerRight>
        <HButton type="primary" is-modal @click="submitForm">保存</HButton>
        <HButton is-modal @click="closeClick">取消</HButton>
      </template>
    </HModal>

    <!-- 仓位库存-->
    <HModal v-model="storePositionDialog" title="仓位库存" :width="800">
      <div v-loading="storePositionLoading">
        <div class="header_storePosition">
          <div class="left_text">
            <p>
              仓位名称：<span>{{ storePositionObj?.name }}</span>
            </p>
            <p style="display: flex; align-items: center">
              仓位状态：
              <HStatus type="info" v-if="storePositionObj?.status"
                ><span style="font-size: 12px">禁用</span></HStatus
              >
              <HStatus v-else>
                <span style="font-size: 12px">启用</span>
              </HStatus>
            </p>
          </div>
          <el-input
            class="right_btn"
            clearable
            v-model="keywordstorePosition"
            placeholder="品牌、名称"
            @keyup.enter="getstorePositionListData"
          >
            <template #append>
              <el-button
                type="primary"
                color="#000"
                :icon="Search"
                @click="getstorePositionListData"
              />
            </template>
          </el-input>
        </div>
        <el-table
          :border="true"
          :data="storePositionList"
          height="50vh"
          resizable
          stripe
          style="width: 100%"
          :header-cell-style="tableHeaderCellStyle"
        >
          <template #empty>
            <el-empty description="暂无数据" />
          </template>
          <el-table-column label="序号" width="60" type="index" fixed />
          <el-table-column prop="goodsBrand" show-overflow-tooltip label="品牌" min-width="150" />
          <el-table-column prop="goodsType" show-overflow-tooltip label="类型" min-width="150" />
          <el-table-column prop="goodsName" show-overflow-tooltip label="名称" min-width="100" />
          <el-table-column prop="goodsModel" show-overflow-tooltip label="型号" min-width="100" />
          <el-table-column
            prop="goodsSpecName"
            show-overflow-tooltip
            label="规格"
            min-width="100"
          />
          <el-table-column prop="goodsUnit" show-overflow-tooltip label="单位" width="100" />
          <el-table-column min-width="100" show-overflow-tooltip>
            <template #header>
              <span>即时库存</span>
              <el-tooltip content="真实存在的库存" placement="top">
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
            </template>
            <template v-slot="i">
              <p class="right_text"> {{ i.row.systemStock.toLocaleString() }}</p>
            </template>
          </el-table-column>
          <el-table-column min-width="100" show-overflow-tooltip>
            <template #header>
              <span>可用库存</span>
              <el-tooltip content="即时库存+即将入库库存-即将出库的库存 " placement="top">
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
            </template>
            <template v-slot="i">
              <p class="right_text"> {{ i.row.availableStock.toLocaleString() }}</p>
            </template>
          </el-table-column>
        </el-table>
        <div class="footer_storePosition">
          <Pagination
            ref="paginationRef"
            :list_total="total_storePosition"
            @size-change="getstorePositionListData"
            @current-change="getstorePositionListData"
          />
        </div>
      </div>
    </HModal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, reactive, nextTick } from 'vue'
  import { useRouter } from 'vue-router'
  import { useRoute } from 'vue-router'
  import { phone, setProvince } from '@/utils/validate'
  import { Search, QuestionFilled, Remove } from '@element-plus/icons-vue'
  import * as _ from 'lodash'
  import { tableHeaderCellStyle } from '@/utils/tools'
  import SingleAddress from './../../../../components/address/singleAddress.vue'
  import { ElMessage, ElMessageBox, FormItemProp } from 'element-plus'
  import Pagination from './../../../../components/Pagination/index.vue'
  import {
    getStoreDetailGoodsList,
    saveStore,
    deleteStore,
    getStorePositionList,
    getDetailStore,
    getStorePositionDetailGoodsList,
  } from '@/api/store'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import HStatus from '@/components/common/status/HStatus.vue'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import HButton from '@/components/common/button/HButton.vue'
  import { HModal } from '@/components/common'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.storage.sotrageDetail,
  })

  const storePositionDialog = ref(false) //仓位开启点击仓位弹窗
  const storePositionLoading = ref(false) //获取仓位加载...
  const storePositionList = ref([]) //仓位列表数据
  const storePositionObj = ref(null) //点击的仓位数据
  const keywordstorePosition = ref('')
  const paginationRef = ref()
  const total_storePosition = ref(0)
  const onClickStorePosition = (obj) => {
    storePositionObj.value = obj
    storePositionDialog.value = true
    nextTick(() => {
      getstorePositionListData()
    })
  }
  // 获取仓位列表
  const getstorePositionListData = async () => {
    storePositionLoading.value = true
    let data = {
      page: paginationRef.value.current, //当面页码
      name: keywordstorePosition.value,
      limit: paginationRef.value.size, //当面页码
    }
    await getStorePositionDetailGoodsList(data, storePositionObj.value.id).then((res) => {
      if (res) {
        if (res.data.code == 20000) {
          storePositionList.value = res.data.data.rows
          total_storePosition.value = Number(res.data.data.total)
        } else {
          if (res.data.isError)
            ElMessage({
              showClose: true,
              message: res.data.message,
              type: 'error',
              duration: 4000,
            })
        }
      }
    })
    storePositionLoading.value = false
  }

  const ruleFormRef = ref()
  const addrsDom = ref()
  const storeForm = ref({
    address: '',
    area: '',
    canNegativeStock: false, //是否允许负库存：false-不允许，true-允许
    city: '',
    delStorePositionIds: [], //	删除的仓库仓位ID集合
    enableStorePosition: false, //是否启用仓位：false-不启用，true-启用
    id: null, //
    name: '', //仓库名称
    otherPhone: '', //其他联系方式
    outStoreExample: 0, // 仓库类型：0-内部仓库，1-服务商-外仓库，2-工程师-外仓库
    outStore: false, //仓库类型：false-内部仓库，true-外部仓库
    outStoreType: 1, //外部仓库类型：1-服务商仓库，2-工程师仓库，当is_out_store=true时生效,示例值(1)
    province: '',
    status: false, //	仓库状态：false-启用，true-禁用
    storeNo: '', //仓库编码，不传则系统生成
    storePositionVos: [
      //仓库仓位对象
      {
        id: null, //仓位ID，新增不必传，修改必传
        name: '', //仓位
        status: false, //仓位状态：false-启用，true-禁用
      },
    ],
    town: '',
    userName: '',
    userPhone: '',
  })
  const rulesStore = reactive({
    address: [{ required: true, message: '请输入详细地址', trigger: ['blur', 'change'] }],
    name: [{ required: true, message: '请输入仓库名称', trigger: ['blur', 'change'] }], //仓库名称
    outStoreExample: [{ required: true, message: '仓库类型', trigger: ['change', 'blur'] }], //仓库类型：false-内部仓库，true-外部仓库
    userName: [{ required: true, message: '请输入仓库联系人', trigger: ['blur', 'change'] }],
    userPhone: [
      { required: true, message: '请输入联系人手机号', trigger: ['blur', 'change'] },
      { validator: phone(storeForm.value.userPhone), trigger: ['blur', 'change'] },
    ],
    province: [
      {
        required: true,
        validator: setProvince(storeForm.value.province),
        trigger: ['blur', 'change'],
      },
    ],
  })

  /**
   * 编辑仓库表单验证结果
   */
  const editStoreFormValidateResult = ref({
    address: true,
    name: true,
    outStoreExample: true,
    userName: true,
    userPhone: true,
    province: true,
  })

  /**
   * 编辑仓库表单验证事件
   */
  const handleEditStoreFormValidate = (prop: FormItemProp, isValid: boolean) => {
    editStoreFormValidateResult.value[prop as string] = isValid
  }

  const TagsViewStore = useTagsViewStore()
  const addDialog = ref(false)
  const router = useRouter()
  const route = useRoute()
  const StoreDetailGoodsList = ref()
  const total = ref(0)

  const orderDetail = ref(null) //工单详情
  const loading = ref(false)
  const pagination = ref()
  const storeListRef = ref()
  const addrs = ref({
    // 地址
    province: '',
    city: '',
    area: '',
    town: '',
  })

  // 所属地址
  function addressValChange() {
    addrs.value = addrsDom.value.getSelectAddr()
    storeForm.value.province = addrs.value.province
    storeForm.value.city = addrs.value.city
    storeForm.value.area = addrs.value.area
    storeForm.value.town = addrs.value.town
  }
  // 保存添加仓库
  const submitForm = _.debounce(async () => {
    if (!ruleFormRef.value) return
    await ruleFormRef.value.validate((valid) => {
      if (valid) {
        loading.value = true
        if (storeForm.value.outStoreExample == 0) {
          storeForm.value.outStore = false
        }
        if (storeForm.value.outStoreExample > 0) {
          storeForm.value.outStore = true
          storeForm.value.outStoreType = storeForm.value.outStoreExample
        }
        saveStore(storeForm.value).then((res) => {
          if (res) {
            if (res.data.code == 20000) {
              ElMessage({
                showClose: true,
                message: res.data.message,
                type: 'success',
                duration: 4000,
                offset: 200,
              })
              getDetailStoreItem()
              closeClick()
            } else {
              if (res.data.isError)
                ElMessage({
                  showClose: true,
                  message: res.data.message,
                  type: 'error',
                  duration: 4000,
                  offset: 200,
                })
            }
          }
          loading.value = false
        })
      }
    })
  }, 600)
  // 删除仓库
  const deleteClick = () => {
    let ids = [storeForm.value.id]

    ElMessageBox({
      title: '提示',
      message: `确定要删除仓库?`,
      showCancelButton: true,
      closeOnClickModal: false,
      type: 'warning',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(async () => {
      await deleteStore(ids).then((res) => {
        if (res) {
          if (res.data.code == 20000) {
            ElMessage({
              showClose: true,
              message: res.data.message,
              type: 'success',
              offset: 200,
            })
            if (addDialog.value) {
              addDialog.value = false
            }
            TagsViewStore.delView(route.path)
            router.push('/storage/list')
          } else {
            if (res.data.isError)
              ElMessage({
                showClose: true,
                message: res.data.message,
                type: 'error',
                offset: 200,
              })
          }
        }
        loading.value = false
      })
    })
  }
  // 显示编辑弹窗
  const showAdd = () => {
    addDialog.value = true
  }
  const DetailStore = ref()
  // 根据仓库ID获取仓库详情
  const getDetailStoreItem = async () => {
    loading.value = true
    await getDetailStore(route.params.id).then((res) => {
      if (res) {
        if (res.data.code == 20000) {
          const data = res.data.data.row
          DetailStore.value = res.data.data.row
          storeForm.value = {
            ...data,
            outStoreExample: data.outStore == false ? 0 : data.outStoreType,
          }
          addrs.value = {
            province: res.data.data.row.province,
            city: res.data.data.row.city,
            area: res.data.data.row.area,
            town: res.data.data.row.town,
          }
          getStoreList()
        } else {
          if (res.data.isError)
            ElMessage({
              showClose: true,
              message: res.data.message,
              type: 'error',
              duration: 4000,
              offset: 200,
            })
        }
      }
    })
    loading.value = false
  }
  // 添加仓库仓位
  const addItem = () => {
    storeForm.value.storePositionVos.push({
      id: null, //仓位ID，新增不必传，修改必传
      name: '', //仓位
      status: false, //仓位状态：false-启用，true-禁用
    })
    storeListRef.value.scrollTop = storeListRef.value.scrollHeight
  }

  // 删除仓库位
  const deleteItem = (i, index) => {
    if (storeForm.value.storePositionVos.length == 1) {
      ElMessage.warning('必须保留至少一个仓位！')
      return
    }
    if (!storeForm.value.delStorePositionIds) {
      storeForm.value.delStorePositionIds = []
    }

    storeForm.value.storePositionVos = storeForm.value.storePositionVos.filter((o, n) => {
      if (index == n && i.id) {
        storeForm.value.delStorePositionIds.push(i.id)
      }
      return n !== index
    })
    if (storeForm.value.storePositionVos.length == 0) {
      storeForm.value.enableStorePosition = false
    }
  }
  // 监听仓库位是否开启
  const enableStorePositionValue = (n) => {
    if (n) {
      if (!storeForm.value.storePositionVos) {
        storeForm.value.storePositionVos = [
          {
            id: null, //仓位ID，新增不必传，修改必传
            name: '', //仓位
            status: false, //仓位状态：false-启用，true-禁用
          },
        ]
      }
    } else {
      storeForm.value.storePositionVos.filter((o) => {
        if (o.id) {
          storeForm.value.delStorePositionIds.push(o.id)
        }
      })
    }
  }
  // 关闭取消
  const closeClick = () => {
    if (!ruleFormRef.value) return
    ruleFormRef.value.resetFields()
    addDialog.value = false
  }
  //库存明细列表
  const getStoreList = async () => {
    loading.value = true
    if (route.params.id) {
      let data = {
        page: pagination.value.current, //当面页码
        name: '',
        limit: pagination.value.size, //当面页码
      }
      if (DetailStore.value?.enableStorePosition) {
        await getStorePositionList(data, route.params.id).then((res) => {
          if (res) {
            if (res.data.code == 20000) {
              StoreDetailGoodsList.value = res.data.data.rows
              total.value = Number(res.data.data.total)
            } else {
              if (res.data.isError)
                ElMessage({
                  showClose: true,
                  message: res.data.message,
                  type: 'error',
                  duration: 4000,
                })
            }
          }
        })
      } else {
        await getStoreDetailGoodsList(data, route.params.id).then((res) => {
          if (res) {
            if (res.data.code == 20000) {
              StoreDetailGoodsList.value = res.data.data.rows
              total.value = Number(res.data.data.total)
            } else {
              if (res.data.isError)
                ElMessage({
                  showClose: true,
                  message: res.data.message,
                  type: 'error',
                  duration: 4000,
                })
            }
          }
        })
      }
    }
    loading.value = false
  }
  onMounted(async () => {
    getDetailStoreItem()
  })
</script>

<style lang="scss" scoped>
  @import './detail';
</style>
